<template>
  <j-modal
    :title="title"
    :width="950"
    :visible="visible"
    :maskClosable="false"
    @close="close"
    @ok="close(true)"
    destroyOnClose
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form v-bind="layout" class="ant-advanced-search-form">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="项目编号" prop="number">
              <a-input v-model="queryParam.number"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="项目名称" prop="name">
              <a-input v-model="queryParam.name" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="计划年度" prop="year">
              <a-date-picker
                mode="year"
                format="YYYY"
                :allowClear="false"
                value-format="YYYY"
                placeholder=""
                v-model="queryParam.year"
                :open="yearPickShow"
                @panelChange="handlePanelChange"
                @openChange="handleOpenChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 4px">清除条件</a-button>
          </a-col>
        </a-row>
      </a-form>

      <div style="margin-top: 10px">
        <a-table
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="rowSelection"
          @change="handleTableChange"
        >
         <template slot="name" slot-scope="text">
            <j-ellipsis :value="text" :length="15" />
          </template>
          <template slot="bsjdwName" slot-scope="text">
            <j-ellipsis :value="text" :length="15" />
          </template>
        </a-table>
      </div>
    </div>
    <!-- table区域-end -->
  </j-modal>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import { mapGetters } from 'vuex'

export default {
  name: 'ProjectModel',
  mixins: [JeecgListMixin],
  data() {
    return {
      queryParam: {},
      superParam: {
        userId: this.userInfo().id,
        stage: '020',
      },
      title: '项目列表',
      layout: {
        labelCol: { span: 9 },
        wrapperCol: { span: 15 },
      },
      visible: false,
      isCheck: false,
      yearPickShow: false,
      model: { fileId: '' },
      url: {
        list: '/sjxmzygl/sjWorkProjectInfo/queryWorkProjectList',
      },
      dataURL: '',
      checkedKeys: '',
      checkedRows: [],
     columns: [
        {
          title: '序号',
          dataIndex: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '计划年度',
          align: 'center',
          dataIndex: 'year',
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '项目编号',
          align: 'center',
          dataIndex: 'number',
        },
        {
          title: '被审计单位',
          align: 'center',
          dataIndex: 'bsjdwName',
          scopedSlots: { customRender: 'bsjdwName' },
        },
      ],
    }
  },
  created() {},
  watch: {},
  computed: {
    rowSelection() {
      return {
        type: 'radio',
        onChange: (selectedRowKeys, selectedRows) => {
          this.checkedKeys = selectedRowKeys
          this.checkedRows = selectedRows
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          //   this.$emit('input', selectedRows[0].name)
          //   this.$emit('getSelect', selectedRows[0])
        },
      }
    },
  },
  methods: {
    ...mapGetters(['userInfo']),
    show() {
      this.queryParam = {}
      this.visible = true
    },
    close(isSubmit) {
      if (isSubmit) {
        this.visible = false
        this.saveData()
      } else {
        this.visible = false
      }
    },
    handlePanelChange(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearPickShow = false
      //   this.$refs.form.validateField('year', (error) => {
      //     console.log(error)
      //   })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
    saveData() {
      this.$emit('getSelect', this.checkedRows[0])
    },
  },
}
</script>
<style lang="css" scoped>
/deep/ .ant-upload-picture-card-wrapper {
  width: 660px !important;
}
</style>
